<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" media="screen" href="stylesheet/base.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="stylesheet/common-index.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="stylesheet/page-screening.css" />
    <title>APISHotel|筛选酒店</title>
</head>

<body>
    <nav>
        <div class="navDiv">
            <div class="navTop inb pr">
                <a href="index.html" class="inb">
                    <i class="logo inb pr"></i>
                    <span>|</span>
                    <h1 class="inb">酒店项目</h1>
                </a>
            </div>
            <div class="nvaRight inb fr">
                <div class="notLogin">
                    <a href="login.html">登陆</a>
                    <a href="register.html">注册</a>
                </div>
                <div class="userTopInfo none" id="userTopInfo">
                    <a href="myIndent.html" class="inb">
                        <img id="topNavIcon" class="navUserIcon" src="images/person-icon.jpg" alt="">
                        <span class="userName font16 fcfff">小鱼儿</span>
                    </a>
                    <div class="showDropdownlist">
                        <i class="dropDownIcon"></i>
                        <div class="dropDownList">
                            <ul>
                                <!-- <li class="triangle">
                                    </li> -->
                                <a href="myIndent.html">
                                    <li><img src="images/icon_user.png">我的订单</li>
                                </a>
                                <a href="infoEdit.html">
                                    <li><img src="images/icon_setting.png">账户设置</li>
                                </a>
                                <a href="login.html" id="logout">
                                    <li><img src="images/icon_exit.png">退出登陆</li>
                                </a>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </nav>
    <header>
        <div class="headerDiv ">
            <div class=" searchContainer clearfix">
                <div class="header-input fl pr">
                    <div class="cityInput pr">
                        <input type="text" class="location" id="location" placeholder="请选择城市" readonly>
                    </div>
                    <div class="citySelect none pa">
                        <ul class="citySelectHeader pr inb clearfix">
                            <li class="cityItem active inb fl" data-value="hot">热门
                                <ul class="cityMain clearfix pa  hot ">
                                </ul>
                            </li>
                            <li class="cityItem inb fl ">ABCEF
                                <ul class="cityMain clearfix  A-F pa none" data-vaue="A-F">
                                </ul>
                            </li>
                            <li class="cityItem inb fl">GHJK
                                <ul class="cityMain clearfix pa G-K none" data-value="G-K">
                                </ul>
                            </li>
                            <li class="cityItem inb fl ">LMNPQ
                                <ul class="cityMain clearfix pa none L-Q" data-value="L-Q">
                                </ul>
                            </li>
                            <li class="cityItem inb fl">RSTW
                                <ul class="cityMain pa clearfix none R-W" data-value="R-W">
                                </ul>
                            </li>
                            <li class="cityItem inb fl">XYZ
                                <ul class="cityMain pa clearfix none X-Z" data-value=" X-Z">
                                </ul>
                            </li>
                        </ul>
                    </div>

                </div>

                <div class="dateInput fl pr">
                    <input type="" class="date" id="calendar" placeholder="请选择日期" readonly>
                </div>

                <!-- <div>
                        酒店名称/位置/关键字
                    </div> -->
                <div class="keywordInput fl">
                    <input type="" class="keyword" id="keyword" placeholder="酒店名称/位置/关键字">
                </div>

                <div class="searchingBar fl">
                    <i class="inb searchIcon"></i>
                    <a>搜索</a>
                </div>
            </div>
            <div class="selecter location">
                <div class="select-hearder fl">
                    位置
                </div>
                <ul class="fl locationUnion">
                    <li id="location-unlimited" class="unlimited active fl">
                        <a>不限</a>
                    </li>
                    <li class="location-type-item fl pr">
                        行政区<i></i>
                        <div class="pa areaListDiv ListDiv none">
                            <ul class="areaList">
                                <!-- <li class="areaItem fl">碑林区</li> -->
                            </ul>
                        </div>
                    </li>
                    <li class="location-type-item fl">
                        商圈 <i></i>
                        <div class="pa tradListDiv ListDiv none">
                            <ul class="tradList">
                                <!-- <li class="tradItem fl">北山门</li> -->
                            </ul>
                        </div>
                    </li>
                    <li class="location-type-item fl">
                        地铁站<i></i>
                        <div class="pa trainListDiv clearfix ListDiv none ">
                            <ul class="trainList">

                            </ul>
                        </div>
                    </li>
                    <li class="location-type-item fl">
                        车站<i></i>
                        <div class="pa stationListDiv ListDiv none">
                            <div class="mt15 clearfix">
                                <div class="train station-icon fl ml15"></div>
                                <ul class="stationlist train clearfix">
                                    <!-- <li class="StationItem fl"></li> -->
                                </ul>
                            </div>
                            <div class="mt15 clearfix">
                                <div class="bus station-icon fl ml15"></div>
                                <ul class="stationlist bus clearfix">
                                    <!-- <li class="StationItem fl"></li> -->
                                </ul>
                            </div>
                            <div class="mt15 clearfix">
                                <div class="plane station-icon fl ml15"></div>
                                <ul class="stationlist plane clearfix">
                                    <!-- <li class="stationItem fl"></li> -->
                                </ul>
                            </div>
                        </div>
                    </li>
                    <li class="location-type-item fl">
                        景点 <i></i>
                        <div class="pa viewListDiv none ListDiv">
                            <ul class="viewlist clearfix">
                                <!-- <li class="viewItem fl"></li> -->
                            </ul>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="selecter price clearfix">
                <div class="select-hearder fl">
                    价格
                </div>
                <ul class="priceUnion fl">
                    <li id="location-unlimited" class="unlimited active fl">
                        <a>不限</a>
                    </li>
                    <li class="price-type-item fl" data-value="1,100">
                        <i></i> 100元以下
                    </li>
                    <li class="price-type-item fl" data-value="100,300">
                        <i></i> 100-300元
                    </li>
                    <li class="price-type-item fl" data-value="300,599">
                        <i></i> 300-600元
                    </li>
                    <li class="price-type-item fl" data-value="600,1000">
                        <i></i> 600-1000元
                    </li>
                    <li class="price-type-item-custom fl">
                        <span class="">自定义</span>
                        <input type="text" id="fromPrice"><span>-</span><input id="toPrice" type="text"><button class="searchByPrice">确定</button>

                    </li>
                </ul>

            </div>
            <div class="selecter rateLevel">
                <div class="select-hearder fl">
                    星级
                </div>
                <ul class="rateUnion fl">
                    <li class="unlimited fl active">
                        <a>不限</a>
                    </li>
                    <li class="rateItem fl" data-value="5"><i></i> 五星/豪华</li>
                    <li class="rateItem fl" data-value="4"><i></i> 四星/高档</li>
                    <li class="rateItem fl" data-value="3"><i></i> 三星/舒适</li>
                    <li class="rateItem fl" data-value="2"><i></i> 二星及以下</li>
                    <li class="spicalRateItem fl" data-value="经济连锁"><i></i> 经济连锁</li>
                    <li class="spicalRateItem fl" data-value="客栈公寓"><i></i> 客栈公寓</li>
                </ul>
            </div>
            <div class="selecter Brand clearfix">
                <div class="select-hearder fl ">
                    品牌
                </div>
                <ul class="brandUnion fl clearfix">
                    <li id="" class="unlimited fl active">
                        <a>不限</a>
                    </li>
                    <li class="brandItem fl" data-value="如家快捷">
                        <i></i>如家快捷
                    </li>
                    <li class="brandItem fl" data-value="汉庭酒店">
                        <i></i>汉庭酒店
                    </li>
                    <li class="brandItem fl" data-value="七天连锁">
                        <i></i>七天连锁
                    </li>
                    <li class="brandItem fl" data-value="锦江之星">
                        <i></i>锦江之星
                    </li>
                    <li class="brandItem fl" data-value="布丁">
                        <i></i>布丁
                    </li>
                    <li class="brandItem fl" data-value="速8">
                        <i></i>速8
                    </li>
                    <li class="moreBrand fl">更多<i></i></li>
                </ul>

            </div>

        </div>
    </header>
    <main>
        <div class="mainContent">
            <div class="sortHeader clearfix">
                <ul class="sortUnion">
                    <li class="sortItem active fl">
                        推荐
                    </li>
                    <li class="sortItem fl">
                        评价<i class=""></i>
                    </li>
                    <li class="sortItem fl">
                        价格
                        <i class=""></i>
                    </li>
                    <li class="sortItem fl">
                        距离<i class=""></i>
                    </li>
                </ul>
                <div class="clearfix pr">
                    <ul class="searchResult">
                        <li class="search-Item clearfix"><img src="images/hotel.jpg" alt="" class="hotel-cover fl">
                            <div class="item-info fl">
                                <div class="infoLeft fl clearfix">
                                    <h2 class="inb hotelName">飘HOME连锁酒店(国贸东店)</h2>
                                    <div class="inb">
                                        <ul class="rating inb">
                                            <li class="rating-item fl active" title="很不好"></li>
                                            <li class="rating-item fl active" title="很好"></li>
                                            <li class="rating-item fl" title="一般"></li>
                                            <li class="rating-item fl" title="好"></li>
                                            <li class="rating-item fl" title="很好"></li>
                                        </ul>
                                    </div>
                                    <h3 class="inb f13 address">碑林区友谊东路33号，西藏驻西安办事处家属院内<a id="showMap" class="showMap il ">-地图</a></h3>
                                </div>
                                <div class="infoMiddle fl ">
                                    <span class="commonRate">4.8</span><span class="f13">/5分</span>
                                    <p class="commentTimes">857次点评</p>
                                </div>
                                <div class="infoRight fl ">
                                    <span class="hotelPrice"> ￥4999</span><span>起</span>
                                    <a href="hotelDetail?id=adasda51z2x3c">
                                        <div class="viewDetail">查看详情</div>
                                    </a>
                                </div>
                            </div>
                        </li>


                    </ul>
                    <div id="searchResultMap" class=" Map pa">

                    </div>
                </div>

            </div>
        </div>


        <div class="paging clearfix">
            <div class="lastPage disable">
                < </div>
                    <ul class="pageArray">

                    </ul>
                    <div class="nextPage">
                        >
                    </div>
            </div>
    </main>


    <footer>
        <div class="copyright">
            <span>Copyright © 2017 apis.sh All Rights Reserved | 陕ICP备15013925号-3</span>
        </div>
    </footer>
    <div class="modal fade none" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">提示</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>

                </div>
                <div class="modal-body">
                    <p>提示内容</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <!-- <button type="button" class="btn btn-primary">Save changes</button> -->
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal 模态框-->
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <script src="https://cdn.bootcss.com/moment.js/2.20.1/moment.js"></script>
    <script src="http://api.map.baidu.com/api?v=3.0&ak=zCDofOMdwRBbZd3gmS95PAHXSvePiuAx"></script>
    <script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.js"></script>
    <script src="js/laydate.js"></script>
    <script src="js/base.js"></script>
    <script src="js/common.js"></script>
    <script src="js/page-screening.js"></script>
</body>

</html>